<template>
  <section class="page-container">
    <section class="page-container__left animate__animated  animate__fadeInLeft">
      <HiCard
        :data="Data.chuangxin"
        :index="0"
        @hand-click="handClick('/home/detail')"
      />
      <HiCard
        :data="Data.anquan"
        :index="0"
        @hand-click="handClick('/home/detail2')"
      />
    </section>

    <section class="page-container__center">
      <CenterMap />
      <section
        class="centerBox__content lt"
        @click="handClick('/home/detail')"
      >
        创新链
      </section>
      <section
        class="centerBox__content rt"
        @click="handClick('/home/detail1')"
      >
        服务链
      </section>
      <section
        class="centerBox__content lb"
        @click="handClick('/home/detail3')"
      >
        安全链
      </section>
      <section
        class="centerBox__content rb"
        @click="handClick('/home/detail2')"
      >
        共富链
      </section>
    </section>
    <section class="page-container__right animate__animated  animate__fadeInRight">
      <HiCard
        :data="Data.fuwu"
        :index="1"
        @hand-click="handClick('/home/detail1')"
      />
      <HiCard
        :data="Data.gongfu"
        :index="1"
        @hand-click="handClick('/home/detail3')"
      />
    </section>
    <!--  展示内容  -->
    <div
      class="contentBg"
      :class="{show:showContent}"
    >
      <p>
        仙桃市委市政府全面落实省委部署，围绕创新链、安全链、服务链和共富链“四链”协同，打造创新引领、高效协同、自主安全的供应链生态。
      </p>
      <p>
        平台整合黄鳝产业培苗炼苗、工厂化养殖、云冻加工、电子商务、科研创新、金融保险等资源，促进供需对接，实现农民增收、企业增效、品牌增值、市场增信、消
        费者满意的产业发展目标。
      </p>
    </div>
    <!--  logo  -->
    <section class="logo">
      <img src="https://oss.qiacaiba.com/screen/screen/copyright01.png">
    </section>
    <!-- 技术支持   -->
    <section class="copyRight">
      <img
        src="https://oss.qiacaiba.com/screen/screen/copyright_txt.png"
        alt=""
      >
    </section>
  </section>
</template>

<script setup lang="ts" name="HomeIndex">
import { onMounted, onUnmounted, ref } from 'vue';

import { useRouter } from "vue-router";

import HiCard from './components/card.vue';
import CenterMap from './components/center-map.vue';
import Data from "./config.js";

const router = useRouter();
import { showLoading, hideLoading } from '@/utils/loading';

const showContent = ref<any>(false);
const timer = ref<any>(null);

const handClick = (url: string) => {
  router.push(url);
};

const onHandleShowContent = () => {
  timer.value = setTimeout(() => {
    showContent.value = true;
  }, 3000);
  if (timer.value) {
    setTimeout(() => {
      showContent.value = false;
    }, 12000);
  }
};
onUnmounted(() => {
  showContent.value = false;
  clearInterval(timer.value);
});
onMounted(() => {
  showLoading();
  setTimeout(() => {
    hideLoading();
  }, 500);
  onHandleShowContent();
});
</script>

<style lang="scss" scoped>
.logo{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  img{display: block;width: 100%;height: 100%;}
}
.copyRight {
  position: fixed;
  bottom: 20px;
  right: 130px;
  width: 255px;
  height: 16px;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.contentBg {
  position: fixed;
  top: -1000px;
  left: 80px;
  background-image: url("@/assets/content_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 500px;
  height: 500px;
  z-index: 100;
  padding: 40px 50px;
  font-family: Source Han Sans;
  font-size: 20px;
  font-weight: bold;
  color: #E4F3FF;
  line-height: 40px;
  transition: all 2s;
  opacity: 0;

  &.show {
    opacity: 1;
    top: 76px;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.page-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 0 90px;

  .page-container__left,
  .page-container__right {
    width: 500px;
  }

  .page-container__center {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    width: 40%;

    //.centerBox {
    //  z-index: 0;
    //  position: absolute;
    //  top: 50%;
    //  left: 50%;
    //  transform: translate(-50%, -50%);
    //  width: 400px;
    //  height: 400px;
    .centerBox__content {
      width: 172px;
      height: 172px;
      background-image: url("@/assets/xgbv7u19q_1726196510663_je9x9z4.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      font-family: 'youshe';
      font-size: 36px;
      color: #fff;
      text-align: center;
      line-height: 172px;
      position: absolute;
      z-index: 1000;
      //animation: spin 2s linear infinite;

      &.lt {
        left: 0px;
        top: 100px;
      }

      &.rt {
        right: 0px;
        top: 100px;
      }

      &.lb {
        left: 0px;
        bottom: 200px;
      }

      &.rb {
        right: 0px;
        bottom: 200px;
      }

      //}
    }
  }

}
</style>
